<template>
	<div class="left-box">
		<div class="heade-wrapper">
			<a-input-group compact style="display: flex;">
				<a-select
					class="heade-left-box "
					v-model="searchTypeId"
					@change="onSearchTypeChanged"
				>
					<a-select-option
						v-for="(item, index) in searchTypeOptions"
						:key="index"
						:value="item.id"
					>
						{{ item.name }}
					</a-select-option>
				</a-select>
				<div class="heade-right-box" v-if="searchType === 'postName'">
					<a-input-search
						v-model="postName"
						:placeholder="this.$i18n('ctp.select2.post.placeholder')"
						@search="onSearch"
					/>
				</div>
				<div class="heade-right-box" v-else>
					<a-select
						v-model="postSelectedValue"
						@change="onPostSelectedChange"
						class="select-list"
					>
						<a-select-option
							v-for="(item, index) in postOptions"
							:key="index"
							:value="item.id"
						>
							{{ item.name }}
						</a-select-option>
					</a-select>
					<a-button @click="onSearch" class="select-list-btn" >
						<a-icon type="search" />
					</a-button>
				</div>
			</a-input-group>
		</div>

		<div class="content-wrapper" v-if="!selectMember">
			<scroll-list
				ref="postList"
				:checkAllShow="false"
				:singleAndMult="false"
				:showCheckbox="selectPost"
				:initSearchValue="initPostListSearchParams"
				command="postList"
				panel="Post"
				iconType="cap-icon-alternative-post"
				@tocheckBoxChange="oncheckBoxChange"
			/>
		</div>
		<top-bottom-layout
			class="content-wrapper"
			v-if="selectMember"
			:is-show-down="isHideDown"
		>
			<template #top>
				<scroll-list
					ref="postList"
					:checkAllShow="false"
					:singleAndMult="true"
					:checkBoxStrictly="true"
					:showCheckbox="selectPost"
					:initSearchValue="initPostListSearchParams"
					command="postList"
					panel="Post"
					:otherProps="postOtherProps"
					:titleProps="postTitleProps"
					iconType="cap-icon-alternative-post"
					@toCheckValueClickProp="onClickPostItem"
					@tocheckBoxChange="oncheckBoxChange"
				/>
			</template>
			<template #middle>
				<div class="content-middle-textbox">
					<span v-show="isShowDetail" style="cursor:pointer" @click.stop="onShowPostDetail">{{ $i18n('selectPeople.post.showDetail.label') }}</span>
				</div>
			</template>
			<template #bottom>
				<scroll-list
					ref="postMemberList"
					:checkAllShow="true"
					:firstLoadSearch="postMemberListFirstLoad"
					:initSearchValue="postMemberListSearchCondition"
					:otherProps="peopleOtherProps"
					:titleProps="peopleTitleProps"
					command="memberList"
					panel="Post"
				/>
			</template>
		</top-bottom-layout>
		<post-member-list
			:showList="showMemberList"
			:activePostData="activePostData"
			@hidden="showMemberList = false"
		></post-member-list>
	</div>
</template>

<script>
import {getPanelData} from '@/api/modules/SelectOrgApi';
import {EntityTypes, GroupId} from '@/utils/orgConstants';

import postMemberList from './pages/postMemberList';
import scrollList from '@/components/scrollList';
import topBottomLayout from '@/components/topBottomLayout';

import {mapActions, mapState} from 'vuex';
import {ACTION_ADD_ENTITY, ACTION_TOGGLE_ENTITY} from '@/store/actionTypes';
import {CheckUtils} from '@/utils/checkUtils';

export default {
	name: 'Post',
	components: {
		topBottomLayout,
		scrollList,
		postMemberList
	},
	inject: ['app'],
	data() {
		return {
			initPostListSearchParams: {},
			selectPost: false,
			postOptions: [],
			postSelectedValue: '',
			searchType: 'postName',
			searchTypeId: '',
			searchTypeOptions: [],
			rightOptions: [],
			postMemberListSearchCondition: {},
			postMemberListFirstLoad: false,
			selectedUnitId: '',
			tab: {},
			selectedSearchTypeOption: {},
			searchParams: {},
			postName: '',
			// peopleOtherProps: ['deptName'],
			peopleTitleProps: { deptName: '部门' },
			postOtherProps: [],
			postTitleProps: {},
			isHideDown: true,
			orgSelect: {},
			selectType: [],

			showMemberList: false,
			activePostData: {},

			dialogPostChecked: []
		};
	},
	computed: {
		...mapState('selectData', ['selectedEntityMap', 'selectedList']),
		selectedIds() {
			let ids = [];
			for (let item of this.selectedList) {
				ids.push(item.id);
			}
			return ids;
		},
		selectMember() {
			return this.selectType.indexOf(EntityTypes.Member) >= 0
				&& GroupId !== this.selectedUnitId;
		},
		isShowDetail() {
			if (Object.keys(this.activePostData).length) {
				return true;
			} else {
				return false;
			}
		},
		peopleOtherProps() {
			return this.onSetOtherProps(['deptName']);
		}

	},
	methods: {
		...mapActions('selectData', [ACTION_TOGGLE_ENTITY, ACTION_ADD_ENTITY]),
		initProps: function () {
			this.isHideDown = true;
			this.postOptions = [];
			this.postSelectedValue = '';
			this.searchTypeId = this.searchTypeOptions[0].id;
			this.rightOptions = [];
			this.postMemberListSearchCondition = {};
			this.postMemberListFirstLoad = false;
			this.selectedUnitId = '';
			this.selectedSearchTypeOption = {};
			this.searchParams = {};
			this.searchType = 'postName';
		},
		/*
		 * 岗位类型、岗位主数据已选项变更
		 */
		onPostSelectedChange: function (value) {
			if (this.selectMember) {
				this.$refs.postMemberList.initProps();
			}
			this.onSearch();
		},
		/*
		 * 搜索类型变更
		 */
		onSearchTypeChanged: function () {
			this.selectedSearchTypeOption = this.searchTypeOptions.find(
				(elem) => elem.id === this.searchTypeId
			);
			this.searchType = this.selectedSearchTypeOption.searchType;
			if (this.searchType !== 'postName') {
				this.postName = '';
			}
			if (this.searchType === 'postName') {
				this.onSearch();
				return;
			}

			let params = {
				panel: 'Post',
				command: 'postMetadataItemList',
				arguments: {
					searchType: this.selectedSearchTypeOption.searchType
				}
			};
			if (this.searchType === 'postOrgMetadata') {
				params.arguments.metadataId = this.selectedSearchTypeOption.id;
				params.arguments.enumId = this.selectedSearchTypeOption.enumId;
				params.arguments.accountId = this.selectedUnitId;
			}
			this.initPostSelector(params);
		},
		/*
		 * 点击岗位列表中单个岗位
		 */
		onClickPostItem: function (el) {
			this.activePostData = el;
			if (!this.selectMember) {
				return;
			}
			this.isHideDown = false;
			this.postMemberListFirstLoad = true;
			let { accessFileSecretLevel, isNeedCheckLevelScope } = this.orgSelect;
			let params = {
				postId: el.id,
				accessFileSecretLevel,
				isNeedCheckLevelScope
			};
			this.$refs.postMemberList.search(params);
		},
		/*
		 * 切换当前机构已选项
		 */
		onChangeAccount: function (ret) {
			this.searchType = 'postName';
			this.postName = '';
			this.initProps();
			if (ret.id !== GroupId
				&& this.orgSelect.selectType.includes(EntityTypes.Member)
			) {
				// 切换为非集团时，需要显示左下区域
				this.isHideDown = false;
			}
			this.$refs.postList.initProps();
			this.selectedUnitId = ret.id;
			this.onSearch();
			// 切换单位时，已经在scrollList/index中的infiniteOnLoadHandle事件中已经走了一次搜索，故这里切换不需要走搜索了。
			// 可以通过initSearchValue属性进行值传递改变accountId
			this.initPostListSearchParams.accountId = ret.id;
		},
		/*
		 * 初始化搜索条件下拉框
		 */
		async initPostSelector(params) {
			let res = await getPanelData(params);
			if (res && res.code === 0) {
				this.postOptions = res.data;
				this.postSelectedValue = this.postOptions[0].id;
			}
			this.onSearch();
		},
		/*
		 * 初始化搜索类型选择下拉框
		 */
		initSearchTypeSelector: function () {
			if (this.tab.extInfo
				&& this.tab.extInfo.metadataList
				&& this.tab.extInfo.metadataList.length > 0) {
				for (let el of this.tab.extInfo.metadataList) {
					this.searchTypeOptions.push(el);
				}
			}
			this.searchType = this.searchTypeOptions[0].searchType;
			this.searchTypeId = this.searchTypeOptions[0].id;
		},
		/*
		 *   搜索
		 */
		onSearch: function () {
			this.searchParams = {};
			this.searchParams.searchType = this.searchType;
			this.searchParams.accountId = this.selectedUnitId;
			if (this.searchType === 'postName') {
				this.searchParams.keyword = this.postName;
			} else if (this.searchType === 'postOrgMetadata') {
				this.searchParams.orgMetadataId = this.postSelectedValue;
			} else if (this.searchType === 'postType') {
				this.searchParams.typeId = this.postSelectedValue;
			}
			this.$refs.postList.search(this.searchParams);
		},
		/**
		 * 判断岗位有没有人员，再根据参数判断能否选择空组
		 * unallowedSelectEmptyGroup： true|false 不允许选择空的部门, 默认false 允许选择空的部门
		 * isNotShowNoMemberConfirm：  true|false 是否不显示“xxx部门下无人，是否继续选择”的提示语，默认false，即显示
		 */
		async oncheckBoxChange(node) {
			if (!this.selectPost) {
				return;
			}
			let nodeList = node;
			if (!(node instanceof Array)) {
				nodeList = [node];
			}
			let checkContext = {
				currentPanel: 'Post',
				notIncludeSubDept: []
			};
			let rs = await CheckUtils.doCheckEntity(nodeList[0], checkContext);
			if (!rs) {
				return;
			}
			this[ACTION_TOGGLE_ENTITY]({
				entities: nodeList
			});
		},
		/**
		 * 展示岗位详情
		 */
		onShowPostDetail() {
			if (Object.keys(this.activePostData).length) {
				this.showMemberList = true;
			}
		},
		/**
		 * 人员【密级】展示处理
		 * @param {Array} list 默认展示的人员信息
		*/
		onSetOtherProps(list) {
			if (this.orgSelect.showSecretLevel) {
				list.unshift('secretLevel')
			}
			return list
		}
	},

	beforeMount() {
		this.orgSelect = this.app().orgSelect;
		if (this.orgSelect.selectType) {
			this.selectType = this.orgSelect.selectType;
		}
		if (this.selectType.indexOf(EntityTypes.Post) >= 0) {
			this.selectPost = true;
		}

		// 获取单位默认值
		this.tab = this.app().tabs.find((el) => el.name === 'Post');
		let accountId = '';
		if (this.app().switchAfterUnit.id) {
			accountId = this.app().switchAfterUnit.id;
		} else {
			accountId = this.orgSelect.defaultAccountId;
		}
		this.selectedUnitId = accountId;
		this.initPostListSearchParams = {
			accountId: accountId
		};
		this.initSearchTypeSelector();
	},
	mounted() {
		if (this.orgSelect.selectType.includes(EntityTypes.Member)) {
			// 进入岗位页签时，如果可选择人员，则显示左下区域
			this.isHideDown = false;
		}
	}
};
</script>

<style lang="scss" scoped>

/deep/ .ant-select-selection {
	border-radius: 2px !important;
}
/deep/ .modal-post-box  {
	top: 50px;
}
.modal-post-box > .ant-modal-content .modal-content {
	.model-top {
		padding-bottom: 20px;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;

		.top-left {
			display: flex;

			.left-label {
				font-size: 14px;
				color: #ddd;
			}

			.left-item {
				font-size: 14px;
				color: #000;
				margin-left: 20px;
			}
		}
	}

	.model-bottom {
		width: 100%;
		height: 300px;
		overflow: auto;
	}
}
</style>
